<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '680px' }"
    >
      <a-row style="margin-bottom: 30px;">
        <a-col :span="24">
          <a-card>
            <a-row>
              <a-col :span="8">
                <a-statistic title="总阅读量" :value="statistic.viewCount" style="margin-right: 50px">
                  <template #suffix>
                    <user-outlined/>
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="8">
                <a-statistic title="总点赞量" :value="statistic.voteCount">
                  <template #suffix>
                    <like-outlined/>
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="8">
                <a-statistic title="点赞率"
                             suffix="%"
                             :precision="2"
                             :value-style="{ color: '#cf1322' }"
                             :value="statistic.voteCount/statistic.viewCount*100"/>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 30px;" :gutter="16">
        <a-col :span="12">
          <a-card>
            <a-row>
              <a-col :span="12">
                <a-statistic title="今日阅读" :value="statistic.todayViewCount" style="margin-right: 50px">
                  <template #suffix>
                    <user-outlined/>
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="12">
                <a-statistic title="今日点赞" :value="statistic.todayVoteCount">
                  <template #suffix>
                    <like-outlined/>
                  </template>
                </a-statistic>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card>
            <a-row>
              <a-col :span="12">
                <a-statistic title="预计今日阅读"
                             :value="statistic.todayViewIncrease"
                             :value-style="{ color: '#0017F8' }"
                             style="margin-right: 50px">
                  <template #suffix>
                    <user-outlined/>
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="12">
                <a-statistic title="预计今日阅读增长"
                             suffix="%"
                             :value-style="statistic.todayViewIncreaseRate<0?{color:'#3f8600'}:{color:'#cf1322'}"
                             :precision="2"
                             :value="statistic.todayViewIncreaseRateAbs">
                  <template #prefix>
                    <arrow-up-outlined v-if="statistic.todayViewIncreaseRate>=0"/>
                    <arrow-down-outlined v-if="statistic.todayViewIncreaseRate<0"/>
                  </template>
                </a-statistic>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <div id="main" ref="echartsRef" style="width: 100%;height: 300px;"></div>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";
import {LikeOutlined, UserOutlined, ArrowUpOutlined, ArrowDownOutlined} from "@ant-design/icons-vue";
import axios from "axios";
import {message} from "ant-design-vue";
import * as echarts from 'echarts'

export default defineComponent({
  name: 'statistic',
  components: {
    LikeOutlined,
    UserOutlined,
    ArrowUpOutlined,
    ArrowDownOutlined
  },
  setup() {
    const echartsRef = ref<HTMLElement>()
    const statistic = ref();
    statistic.value = {};

    const getStatistic = () => {
      axios.get("/ebookSnapshot/getStatistic").then((response) => {
        const data = response.data;
        if (data.success) {
          const statisticResp = data.content;
          statistic.value.viewCount = statisticResp[1].viewCount;
          statistic.value.voteCount = statisticResp[1].voteCount;
          statistic.value.todayViewCount = statisticResp[1].viewIncrease;
          statistic.value.todayVoteCount = statisticResp[1].voteIncrease;

          // 按分钟计算当前时间点，占一天的百分比
          const now = new Date();
          const nowRate = (now.getHours() * 60 + now.getMinutes()) / (60 * 24);
          statistic.value.todayViewIncrease = parseInt(String(statisticResp[1].viewIncrease / nowRate));
          // todayViewIncreaseRate：今日预计增长率
          statistic.value.todayViewIncreaseRate = (statistic.value.todayViewIncrease - statisticResp[0].viewIncrease) / statisticResp[0].viewIncrease * 100;
          statistic.value.todayViewIncreaseRateAbs = Math.abs(statistic.value.todayViewIncreaseRate);

        } else {
          message.error(data.message);
        }
      });
    }

    const daysEcharts = (statisticList: any) => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(echartsRef.value!);

      const xAxis = [];
      const seriesView = [];
      const seriesVote = [];
      for (let i = 0; i < statisticList.length; i++) {
        const record = statisticList[i];
        xAxis.push(record.date);
        seriesView.push(record.viewIncrease);
        seriesVote.push(record.voteIncrease);
      }

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '30天趋势图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总阅读量', '总点赞量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总阅读量',
            smooth: true,
            type: 'line',
            stack: 'Total',
            data: seriesView
          },
          {
            name: '总点赞量',
            smooth: true,
            type: 'line',
            stack: 'Total',
            data: seriesVote
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }

    const get30DaysStatistic = () => {
      axios.get("/ebookSnapshot/get30Statistic").then((response) => {
        const data = response.data;
        if (data.success) {
          const statisticList = data.content;
          daysEcharts(statisticList);
        } else {
          message.error(data.message);
        }
      });
    }

    onMounted(() => {
      getStatistic();
      get30DaysStatistic();
    })

    return {
      statistic,
      echartsRef
    }
  }
})
</script>

<style scoped>

</style>